<template>
  <div class="components-list">
    <SettingWrap :list="list" >
      <template v-slot:default="{activeName}">
        <Analysis v-show="activeName === 'analysis'" />
        <Tool v-show="activeName === 'tool'" />
        <Layer v-show="activeName === 'layer'" />
      </template>
    </SettingWrap>




  </div>
</template>

<script >
import Analysis from "./Analysis/index.jsx"
import Tool from "./Tool"
import Layer from "./Layer/index.jsx"
import SettingWrap from "../../common/SettingWrap"

export default {
  name: "ComponentList",
  data() {
    return {
      list: [
        {
          icon: "area-chart",
          title: "分析组件",
          id: "analysis",
          isShow: true
        },
        {
          icon: "tool",
          title: "工具组件",
          id: "tool",
          isShow: true
        },
        {
          icon: "switcher",
          title: "图层管理",
          id: "layer",
          isShow: true
        }
      ],
    }
  },
  methods: {
  },
  components: {
    Analysis,
    Tool,
    Layer,
    SettingWrap
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
